<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>其它原因耗油</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form-model layout="inline" :model="form">
        <div>
          <a-form-model-item label="耗油类型">
            <a-select v-model="form.oilBusinessType" style="width: 120px">
              <a-select-option value>全部</a-select-option>
              <a-select-option value="UPKEEP">保养耗油</a-select-option>
              <a-select-option value="REPAIR">维修耗油</a-select-option>
              <a-select-option value="ANNUAL">年检耗油</a-select-option>
              <a-select-option value="OTHER">其它耗油</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="船名">
            <a-select v-model="form.shipId" style="width: 150px">
              <a-select-option value>全部</a-select-option>
              <a-select-option
                v-for="item in shipList"
                :key="item.id"
                :value="item.id"
              >{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="日期">
            <a-range-picker @change="dateChange" style="width: 250px" />
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="check">查询</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="exportExcel">导出excel</a-button>
          </a-form-model-item>
          <a-form-model-item>
            <a-button type="primary" @click="plus">+ 添加油耗记录</a-button>
          </a-form-model-item>
        </div>
      </a-form-model>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        :style="'margin-top: 25px;'"
        :pagination="pagination"
        :row-key="record => record.id"
      >
        <template slot="oilBusinessType" slot-scope="text,record">
          <span v-if="record.businessType==='REPAIR'">维修耗油</span>
          <span v-else-if="record.businessType==='ANNUAL'">年检耗油</span>
          <span v-else-if="record.businessType==='UPKEEP'">保养耗油</span>
          <span v-else-if="record.businessType==='OTHER'">其它耗油</span>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model="visible"
      title="添加其它原因耗油记录"
      :body-style="{padding:'24px 40px 0px 20px'}"
      centered
      :confirmLoading="createStatus"
      @ok="addRecord"
      @cancel="cancelRecord"
    >
      <a-form-model
        ref="addForm"
        :rules="addRule"
        :model="addForm"
        :label-col="{span:6}"
        :wrapper-col="{span:18}"
      >
        <a-form-model-item label="耗油类型" prop="businessType">
          <a-select v-model="addForm.businessType">
            <a-select-option value>请选择</a-select-option>
            <a-select-option value="UPKEEP">保养耗油</a-select-option>
            <a-select-option value="REPAIR">维修耗油</a-select-option>
            <a-select-option value="ANNUAL">年检耗油</a-select-option>
            <a-select-option value="OTHER">其它耗油</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="船名" prop="shipId">
          <a-select v-model="addForm.shipId">
            <a-select-option value>请选择</a-select-option>
            <a-select-option v-for="item in shipList" :key="item.id" :value="item.id">{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="耗油量（吨）" prop="oilVolume">
          <a-input-number
            id="inputNumber"
            v-model="addForm.oilVolume"
            :min="0"
            :precision="4"
            style="width:100%"
          />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input
            v-model="addForm.remark"
            type="textarea"
            :max-length="200"
            :auto-size="{ minRows: 3, maxRows: 3 }"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import {
  queryShipOilOutList,
  queryShipNameList,
  addShipOilStockOut
} from '@/api/shipCenter'
import { commonExport } from '@/api/request'
const fomrMessage = `必填项不能为空`
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '耗油类型',
    _needName: true,
    dataIndex: 'businessType',
    scopedSlots: {
      customRender: 'oilBusinessType'
    }
  },
  {
    title: '船名',
    dataIndex: 'custName'
  },
  {
    title: '耗油量（吨）',
    dataIndex: 'oilVolume',
    customRender: (text, record, index) => {
      return record.oilVolume.toFixed(4)
    }
  },
  {
    title: '耗油总价（元）',
    dataIndex: 'totalAmount',
    customRender: (text, record, index) => {
      return record.totalAmount.toFixed(2)
    }
  },
  {
    title: '日期',
    dataIndex: 'createTime'
  },
  {
    title: '原因',
    width: 200,
    dataIndex: 'remark',
    customRender: (text, record, index) => {
      return record.remark || '--'
    }
  }
]
export default {
  data () {
    return {
      confirmStatus: false,
      shipList: [],
      form: {
        shipId: '', // 船id
        inOrOut: 2, // 耗油出库
        oilBusinessType: '', // OIL(“加油”),FUEL(“航线耗油”),REPAIR(“维修”),ANNUAL(“年检”),UPKEEP(“保养”),OTHER(“其它”)
        startDate: '',
        endDate: '',
        oilType: 1,
        isFuel: 0
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      addForm: {
        oilType: 1,
        businessType: '',
        shipId: '',
        oilVolume: '',
        remark: ''
      },
      addRule: {
        businessType: [
          { required: true, message: fomrMessage, trigger: 'blur' }
        ],
        shipId: [{ required: true, message: fomrMessage, trigger: 'blur' }],
        oilVolume: [{ required: true, message: fomrMessage, trigger: 'blur' }]
      },
      visible: false,
      btnControl: {},
      createStatus: false
    }
  },
  methods: {
    shipNameList () {
      queryShipNameList({
        status: 1
        // isSelfOperation: 1
      }).then(res => {
        this.shipList = res.data
      })
    },
    addOilReason (param) {
      this.createStatus = true
      addShipOilStockOut(param)
        .then(res => {
          if (res.code === 0) {
            this.$message.success('添加成功！')
            this.pageNum = 1
            this.pageSize = 10
            let paramData = {
              pageSize: this.pageSize,
              pageNum: this.pageNum,
              ...this.form
            }
            this.queryRoute(paramData)
            setTimeout(() => {
              this.visible = false
              this.createStatus = false
              this.cancelRecord()
            }, 300)
          }
        })
        .catch(rs => {
          this.createStatus = false
        })
    },
    check () {
      this.pageNum = 1
      this.pageSize = 10
      let paramData = {
        ...this.form,
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      // // console.log(paramData)
      this.queryRoute(paramData)
    },
    exportExcel () {
      commonExport('/ship/exportShipOilOutList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: this.columns
      })
    },
    plus () {
      if (!this.btnControl.create) {
        this.$message.error('您无此权限！')
        return false
      }
      this.visible = true
    },
    queryRoute (paramData) {
      queryShipOilOutList(paramData)
        .then(res => {
          // // console.log(res.data.list)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryRoute(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.queryRoute(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    dateChange (date, dateString) {
      this.form.startDate = dateString[0]
      this.form.endDate = dateString[1]
    },
    addRecord () {
      let _self = this
      // if (!_self.createStatus) {
      //   this.$message.error('请勿重复提交！')
      //   return false
      // }
      _self.$refs.addForm.validate(valid => {
        if (valid) {
          // // console.log(_self.addForm)
          _self.addOilReason(_self.addForm)
        }
      })
    },
    cancelRecord () {
      let addForm = {
        oilType: 1,
        businessType: '',
        shipId: '',
        oilVolume: '',
        remark: ''
      }
      this.addForm = addForm
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.btnControl = this.$root._bc
      // console.log(this.$root._bc)
    })
    this.shipNameList()
    this.queryRoute({
      pageSize: this.pageSize,
      pageNum: this.pageNum,
      oilType: 1,
      isFuel: 0,
      inOrOut: 2
    })
  }
}
</script>
<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
  .green {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00a854;
    margin-right: 5px;
  }
  .red {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #f04134;
    margin-right: 5px;
  }
}
</style>
